<template>
  <div class="main">
      <div class="content">
        <el-row :gutter="10">
          <el-col :span="16">
              <div class="product-detail">
                  <h1 class="product-title">
                    {{productDetail.name}}
                  </h1>
                  <div>
                      <div class="product-info">
                        <el-row :gutter="20">
                        <template v-if="productDetail.productCategory == '私募股权'">

                         <el-col :span="8">
                             <div>
                              <p>{{productDetail.investDirect}}</p>
                              <p>投资方向</p>
                            </div>
                          </el-col>

                          <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.productDeadlinecp}}</i></p>
                              <p>存续期限</p>
                            </div>
                           </el-col>

                           <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.beginMoney}}万元</i></p>
                              <p>起投金额</p>
                            </div>
                           </el-col>


                        </template>
                        <template v-else>

                          <el-col :span="8">
                             <div>
                              <p>{{productDetail.payRateWay}}</p>
                              <p>付息方式</p>
                            </div>
                          </el-col>

                          <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.investDirect}}</i></p>
                              <p>投资领域</p>
                            </div>
                           </el-col>

                           <el-col :span="8">
                             <div>
                              <p><i>{{productDetail.beginMoney}}万</i></p>
                              <p>投资起点</p>
                            </div>
                           </el-col>

                        </template>
                        </el-row>
                      <div class="coreHighlights" v-html="productDetail.coreHighlights"></div>
                      </div>
                      <!-- <div class="productdetailinfo"> 
                        <h2>理财产品详情参数</h2>
                        <div class="producttable">
                            <ul>
                                <li v-for="item in tableData1" :key="item.index">
                                    <span class="tablekey">{{item.key}}</span> <span class="tablevaule">{{item.value}}</span>
                                </li>
                            </ul>
                            <ul>
                                <li v-for="item in tableData2" :key="item.index">
                                    <span class="tablekey">{{item.key}}</span> <span class="tablevaule">{{item.value}}</span>
                                </li>
                            </ul>
                        </div>
                      </div> -->
                      <div class="productdetailinfo"> 
                        <h2>产品详情</h2>
                        <div class="productinfo">
                            <h1>{{productDetail.name}}</h1>
                            <div v-if="productDetail.productCategory == '私募股权'">
                                <p>
                                  <span>募集规模：{{productDetail.productCategory}}</span>
                                  <span>存续期限：{{productDetail.productDeadlinecp}}</span>
                                  <span>募集规模：{{productDetail.financeScale == 0 ? "请咨询理财师":productDetail.financeScale}}</span>                                  
                                </p>
                                 <p>
                                  <span>基金类型：{{productDetail.etf}}</span>
                                  <span>投资门槛：{{productDetail.beginMoney}}</span>
                                  <span>管理费率：{{productDetail.manageRate}}%</span>                                  
                                </p>
                                 <p>
                                  <span>开始募集时间：{{productDetail.beginTime}}</span>
                                  <span></span>
                                  <span></span>                                  
                                </p>
                            </div>
                            <div v-else>
                                 <p>
                                  <span>投资领域：{{productDetail.investDirect}}</span>
                                  <span>认购起点：{{productDetail.beginMoney}}万</span>
                                  <span>产品状态：{{productDetail.productStatus}}</span>                                  
                                </p>
                                 <p>
                                  <span>发行机构：{{productDetail.publishEduinfo}}</span>
                                  <span>产品期限：{{productDetail.productExpires == 0 ? "永续" : productDetail.productExpires }}</span>
                                  <span>预期年化收益：{{productDetail.yearEarningsRate}}%</span>                                  
                                </p>
                                <p>
                                  <!-- <span>产品分类：{{productDetail.productClass}}</span> -->
                                 
                                  <span>付息方式：{{productDetail.payRateWay}}</span>
                                  <span>抵押物：{{productDetail.collateral}}</span>     
                                  <span>发行日期：{{productDetail.beginTime}}</span>                              
                                </p>
                                 <p>
                                  
                                  <span></span>
                                  <span></span>                                  
                                </p>
                            </div>
                        </div>  
                      </div>
                        <div class="productdetailinfo" v-if="productDetail.incomeExplain != ''">
                         <h2>收益说明</h2>
                         <p class="prodetilgood" v-html="productDetail.incomeExplain"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.productExplain != '' && productDetail.productCategory == '私募股权'">
                         <h2>产品说明</h2>
                         <p class="prodetilgood" v-html="productDetail.productExplain"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.eduInfo != '' && productDetail.productCategory == '私募股权'">
                         <h2>管理机构介绍</h2>
                         <p class="prodetilgood" v-html="productDetail.eduInfo"></p>
                      </div>


                      <div class="productdetailinfo" v-if=" productDetail.moneyUseFor != '' && productDetail.productCategory != '私募股权'">
                         <h2>资金用途</h2>
                         <p class="prodetilgood" v-html="productDetail.moneyUseFor"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.payment != '' && productDetail.productCategory != '私募股权'">
                         <h2>还款来源</h2>
                         <p class="prodetilgood" v-html="productDetail.payment"></p>
                      </div>
                      <div class="productdetailinfo" v-if="productDetail.projectLights != '' && productDetail.productCategory != '私募股权'">
                         <h2>项目亮点</h2>
                         <p class="prodetilgood" v-html="productDetail.projectLights"></p>
                      </div>
                  </div>
              </div>
         </el-col>
           <el-col :span="8">
             <div class="right">
                <contactus></contactus>
                 <buyeasy1></buyeasy1>
                 <producttuijian :productlist="productlist"></producttuijian>                 
             </div>
          </el-col>
        </el-row>
      </div>
    <announcement :infodata="newsinfo" :newbox1="newlist1" :newbox2="newlist2" :newbox3="newlist3"></announcement>
      
  </div>
</template>


<script>
import api from '../../../../../static/js/api.js'
import contactus from "../../../../../components/contactus";
import buyeasy1 from "../../../../../components/buyeasy1";
import producttuijian from "../../../../../components/producttuijian";
import announcement from "../../../../../components/announcement";
import asyncApi from '../../../../../static/js/asyncApi.js'



export default {
  data() {
    return {
      radio1: "不限",
      radio2: "不限",
      radio3: "不限",
      productDetail:{},
      newsDetail:{},
      tableData1: "",
      tableData2:"",
      productlist:[],
      newsinfo:{
        title:"投资策略",
        msg1:"观宏观大势，把握市场发展趋势",
        msg2:"观财经实时热点，紧握当下投资机会，",
        msg21:"紧握当下投资机会",        
        msg3:"观市场变幻，把握最佳投资时机"        
      }    
    };
  },

  components: {
    contactus,
    buyeasy1,
    producttuijian,
    announcement
  },
  methods:{
    gonewdetail(val){
        this.$router.push("/post/" + val)
    },
     
    getPostDetail(id){
     var id = parseInt(id)      
      api.getProductDetail({id:id}).then((res)=>{
          this.productDetail = res.data;
          this.tableData1 = [{
          key: '发行机构',
          value: this.productDetail.issueEdu
        },{
          key: '产品状态',
          value: this.productDetail.productStatus
        },{
          key: '产品分类',
          value: this.productDetail.productCategory
        },{
          key: '投资领域',
          value: this.productDetail.investDirect
        },{
          key: '产品期限',
          value: this.productDetail.productDeadline
        },{
          key: '认购起点',
          value: this.productDetail.beginMoney
        }],
        this.tableData2 = [{
          key: '预期收益率',
          value: this.productDetail.yearEarningsRate
        },{
          key: '付息方式',
          value: this.productDetail.payRateWay
        },{
          key: '发行日期',
          value:  this.productDetail.publishTime
        },{
          key: '计息时间',
          value: this.productDetail.financeScale
        },{
          key: '人气指数',
          value: this.productDetail.popularityNum
        },{
          key: '开始募集时间',
          value: this.productDetail.beginTime  
        }]
      })
    },
    getNewsinfo(){
        api.getCategoryPost({categoryName:"财经新闻",page:"1",pageSize:"10"}).then((res)=>{
               this.newsDetail = res.data.list
        })
         api.getProduct({categoryName:"私募股权",page:"1",pageSize:"3"}).then((res)=>{
              this.productlist = res.data.list
        })
    }
  },
  mounted :function(){
    this.getPostDetail(this.$route.params.id)
    this.getNewsinfo()
  },
   async asyncData (context) {
    let [data1] = await Promise.all([
        asyncApi.asyncGetCategoryPost({categoryName: "投资策略",page: "1",pageSize: "15"}),
    ])
    return {
      newlist1:data1.data.data.list.slice(0,5),
      newlist2:data1.data.data.list.slice(5,10),
      newlist3:data1.data.data.list.slice(10,15),
      
      }
 },
};
</script>

<style scoped>

.productinfo{
  margin: 20px;
}
.productinfo h1{
  font-size: 16px;
  color: #333;
  font-weight: bolder;
  height: 30px;
  line-height: 30px;
}
.productinfo p{
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.productinfo p span{
  display: inline-block;
  width: 33%;
}
.coreHighlights{
  text-align: center;
  font-size: 14px;
  color: #333;
  height: 10px;
  line-height: 10px;
}
.prodetilgood{
  margin: 20px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  text-indent: 2rem;
}
.productdetail{
  background: white;
}
.productdetailinfo{
  border: 1px solid #666;
  overflow: hidden;
  margin-top: 20px;
}
.product-info{
  height: 156px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #666;
  border-top: none;
}

.product-info p{
  text-align: center;
}
.product-info p:nth-child(1){
  color: #333;
  height: 20px;;
  font-size: 22px;
  margin: 30px 0 0;
  font-weight: bolder;
}
.product-info p:nth-child(1) i{
  font-size: 22px;
}
.product-info p:nth-child(2){
  font-size: 16px;
  padding-top: 20px;
  margin-bottom: 30px;
  color: #333;
}
.producttable ul{
  margin-top: 10px;
  float: left;
  color: #26304c;
  overflow: hidden;
  margin-left: 30px;
}
.producttable li{
  width: 300px;
  border-bottom: 1px dashed #ccc;
  height: 46px;
  line-height: 46px;
  font-size: 14px;
}
.tablekey{
  display: inline-block;
  width: 110px;
  overflow: hidden;
}
.tablevaule{
 display: inline-block;
 width: 180px;
  overflow: hidden;
 
}
.product-detail h2 {
  font-size: 16px;
  height: 40px;
  width: 150px;
  background: #cd9c54;
  color: white;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
.main .product-title {
  color: white;  
  text-align: center;
  background: #cd9c54;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}
.newcontent {
  text-indent: 2rem;
  overflow: hidden;
   text-overflow: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  color: #555557;
}

.main {
  width: 1200px;
  margin: 10px auto;
}
.product-detail{
  background: white;
  padding: 20px;
}

</style>
